<template>
    <div class="brand-container">
      <!--品牌顶部-->
      <div class="brand-top" style="background: #fff;">
        <div class="brand-top-wrapper">
          <h3>
            <i></i>
            <p>枸杞十大品牌，枸杞哪个品牌好</p>
            <i></i>
          </h3>
        </div>
        <p class="brd-tips">以下为您介绍枸杞相关品牌，中国枸杞品牌排行榜。欢迎各位网友参与投票，投出您自己心目中的枸杞品牌，我们的排行榜为您展示您喜欢的枸杞品牌。</p>
        <div class="brand-tabs">
          <div v-for="(item,index) of leaderBoard" :key="index" :data-id="index" :class="[index === 0 ? 'brand-tab-item select':'brand-tab-item']" @click="changeLeaderBoard">{{item}}</div>
        </div>
      </div>
      <!--品牌列表-->
      <div class="brand-content-list">
        <!--品牌榜-->
        <ul data-index="0" style="display: block">
          <li class="brand-item clearfix" v-for="(item,index) of brandList" :key="index">
            <div class="brand-ranks">
              <p>{{index+1}}</p>
              <span>TOP</span>
            </div>
            <div class="brand-item-intro">
              <!--图片-->
              <div class="intro-image-container">
                <router-link :to="item.brandUrl" :title="item.brandName" target="_blank" class="intro-image">
                  <img :src="item.trademarkIcon" onerror="this.src='https://static.chinapp.com/home/img/default.png'"/>
                </router-link>
                <!--详情-->
                <div class="intro-item-intro">
                  <div class="intro-item-top">
                    <div class="intro-item-tit">
                      <router-link :to="item.brandUrl" :title="item.brandName">{{item.brandName}}</router-link>
                      <i class=""></i>
                    </div>
                  </div>
                  <p class="company-name">{{item.company}}</p>
                  <p class="company-intro">{{item.brandIntro}} </p>
                  <!--网店列表-->
                  <div class="outlets-lists">
                    <div class="outlets-items"><i></i><p><a :href="item.onlineShop.jingdong" target="_blank">京东旗舰店</a></p></div>
                    <div class="outlets-items"><i></i><p><a :href="item.onlineShop.tianmao" target="_blank">天猫旗舰店</a></p></div>
                  </div>
                </div>
                <div class="watp">
                  <p>影响力指数：<span>{{item.influence}}</span></p>
                  <router-link :to="item.brandUrl" class="N_vote">查看品牌</router-link>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <!--优选榜-->
        <ul data-index="1" style="display: none">
          <li class="brand-item clearfix" v-for="(item,index) of preferredList" :key="index">
            <div class="brand-ranks">
              <p>{{index+1}}</p>
              <span>TOP</span>
            </div>
            <div class="brand-item-intro">
              <!--图片-->
              <div class="intro-image-container">
                <router-link :to="item.brandUrl" :title="item.brandName" target="_blank" class="intro-image">
                  <img :src="item.trademarkIcon" onerror="this.src='https://static.chinapp.com/home/img/default.png'"/>
                </router-link>
                <!--详情-->
                <div class="intro-item-intro">
                  <div class="intro-item-top">
                    <div class="intro-item-tit">
                      <a :href="item.brandUrl" :title="item.brandName" target="_blank">{{item.brandName}}</a>
                      <i class=""></i>
                    </div>
                  </div>
                  <p class="company-name">{{item.company}}</p>
                  <p class="company-intro">{{item.brandIntro}} </p>
                  <!--网店列表-->
                  <div class="outlets-lists">
                    <div class="outlets-items"><i></i><p><a :href="item.onlineShop.jingdong" target="_blank">京东旗舰店</a></p></div>
                    <div class="outlets-items"><i></i><p><a :href="item.onlineShop.tianmao" target="_blank">天猫旗舰店</a></p></div>
                  </div>
                </div>
                <div class="watp">
                  <p>影响力指数：<span>{{item.influence}}</span></p>
                  <router-link :to="item.brandUrl" class="N_vote">查看品牌</router-link>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <!--新锐榜-->
        <ul data-index="2" style="display: none">
          <li class="brand-item clearfix" v-for="(item,index) of newLeaderList" :key="index">
            <div class="brand-ranks">
              <p>{{index+1}}</p>
              <span>TOP</span>
            </div>
            <div class="brand-item-intro">
              <!--图片-->
              <div class="intro-image-container">
                <router-link :to="item.brandUrl" :title="item.brandName" target="_blank" class="intro-image">
                  <img :src="item.trademarkIcon" onerror="this.src='https://static.chinapp.com/home/img/default.png'"/>
                </router-link>
                <!--详情-->
                <div class="intro-item-intro">
                  <div class="intro-item-top">
                    <div class="intro-item-tit">
                      <router-link :to="item.brandUrl" :title="item.brandName" target="_blank">{{item.brandName}}</router-link>
                      <i class=""></i>
                    </div>
                  </div>
                  <p class="company-name">{{item.company}}</p>
                  <p class="company-intro">{{item.brandIntro}} </p>
                  <!--网店列表-->
                  <div class="outlets-lists">
                    <div class="outlets-items"><i></i><p><a :href="item.onlineShop.jingdong" target="_blank">京东旗舰店</a></p></div>
                    <div class="outlets-items"><i></i><p><a :href="item.onlineShop.tianmao" target="_blank">天猫旗舰店</a></p></div>
                  </div>
                </div>
                <div class="watp">
                  <p>影响力指数：<span>{{item.influence}}</span></p>
                  <router-link :to="item.brandUrl" class="N_vote">查看品牌</router-link>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <!--人气榜-->
        <ul data-index="3" style="display: none">
          <li class="brand-item clearfix" v-for="(item,index) of popularityList" :key="index">
            <div class="brand-ranks">
              <p>{{index+1}}</p>
              <span>TOP</span>
            </div>
            <div class="brand-item-intro">
              <!--图片-->
              <div class="intro-image-container">
                <router-link :to="item.brandUrl" :title="item.brandName" target="_blank" class="intro-image">
                  <img :src="item.trademarkIcon" onerror="this.src='https://static.chinapp.com/home/img/default.png'"/>
                </router-link>
                <!--详情-->
                <div class="intro-item-intro">
                  <div class="intro-item-top">
                    <div class="intro-item-tit">
                      <router-link :to="item.brandUrl" :title="item.brandName" target="_blank">{{item.brandName}}</router-link>
                      <i class=""></i>
                    </div>
                  </div>
                  <p class="company-name">{{item.company}}</p>
                  <p class="company-intro">{{item.brandIntro}} </p>
                  <!--网店列表-->
                  <div class="outlets-lists">
                    <div class="outlets-items"><i></i><p><a :href="item.onlineShop.jingdong" target="_blank">京东旗舰店</a></p></div>
                    <div class="outlets-items"><i></i><p><a :href="item.onlineShop.tianmao" target="_blank">天猫旗舰店</a></p></div>
                  </div>
                </div>
                <div class="watp">
                  <p>影响力指数：<span>{{item.influence}}</span></p>
                  <router-link :to="item.brandUrl" class="N_vote">查看品牌</router-link>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!--品牌话题-->
      <div class="brand-topic"></div>
      <!--提示信息-->
      <div class="remember-tips">
        <p>以上为您展示是枸杞品牌，以及枸杞品牌排行榜。如有疑问或咨询如何加入枸杞品牌排行榜，请联系本站<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=85926368&amp;site=qq&amp;menu=yes" rel="nofollow">客服QQ</a></p>
      </div>
      <!--枸杞品牌推荐标题-->
      <div class="brand-recommend">
        <h3>
          <i></i>
          <p>枸杞哪个品牌好？知名枸杞品牌推荐</p>
          <i></i>
        </h3>
      </div>
      <!--推荐列表-->
      <div class="gouqi-recommend-list">
        <ul class="clearfix">
          <li class="rec-item">
            <a href="" target="_blank" title="BERYL百瑞源" class="jd_rec_imgs">
              <img src="https://img.chinapp.com/uploadfile/Pinpai/2017-04-25/14930541115927.gif">
            </a>
            <a href="" target="_blank" title="BERYL百瑞源" class="brand-name">BERYL百瑞源</a>
          </li>

          <li class="rec-item">
            <a href="" target="_blank" title="TRT同仁堂健康" class="jd_rec_imgs">
              <img src="https://img.chinapp.com/uploadfile/Pinpai/2017-04-24/14930425597284.gif">
            </a>
            <a href="" target="_blank" title="TRT同仁堂健康" class="brand-name">TRT同仁堂健康</a>
          </li>

          <li class="rec-item">
            <a href="" target="_blank" title="早康" class="jd_rec_imgs"><img src="https://img.chinapp.com/uploadfile/pinpai/original/20180926/a2bc155abed1993b5f759497ea7f014e.jpg"></a>
            <a href="" target="_blank" title="早康" class="brand-name">早康</a>
          </li>

          <li class="rec-item">
            <a href="" target="_blank" title="晶珠" class="jd_rec_imgs"><img src="https://img.chinapp.com/uploadfile/pinpai/original/20190731/b0b4ebabeb604e3e35eda83b1bf31a55.jpg"></a>
            <a href="" target="_blank" title="晶珠" class="brand-name">晶珠</a>
          </li>
        </ul>
        <a href="" title="枸杞" target="_blank" class="look-more">
          <i></i>
          <p>更多</p>
        </a>
      </div>

      <router-view></router-view>
    </div>
</template>

<script>
// import {getBrandList} from '../../../api/reqBrand'
import {getBrandData} from '../../../api/reqBrand'
export default {
  name: 'BrandPage',
  mounted () {
    this.init()
  },
  data () {
    return {
      leaderBoard: ['品牌榜', '优选榜', '新锐榜', '人气榜'],
      brandList: [], // 品牌榜
      preferredList: [], // 优选榜
      newLeaderList: [], // 新锐榜
      popularityList: []// 人气榜
    }
  },
  methods: {
    /**
     * 初始化页面
     */
    init: async function () {
      const promise = await getBrandData()
      console.log('排行榜结果：', promise)
      this.brandList = promise.data.brandList
      this.preferredList = promise.data.preferredList
      this.newLeaderList = promise.data.newLeaderList
      this.popularityList = promise.data.popularityList
    },
    /**
     * 切换榜单
     * @param ev
     */
    changeLeaderBoard: function (ev) {
      console.log('切换榜单····')
      ev = ev || event
      let target = ev.target || ev.srcElement
      // 索引
      let index = parseInt(target.dataset.id)
      // tab页的兄弟节点
      let tabSiblings = target.parentNode.children
      // 获取ul列表
      let ulParent = document.getElementsByClassName('brand-content-list')[0]
      let ulSiblings = ulParent.children
      for (let i = 0, len = tabSiblings.length; i < len; i++) {
        tabSiblings[i].className = 'brand-tab-item'
        ulSiblings[i].style.display = 'none'
        if (index === parseInt(ulSiblings[i].dataset.index)) {
          // 显示对应的ul元素
          ulSiblings[i].style.display = 'block'
        }
      }
      target.classList.add('select')
    }
  }
}
</script>

<style scoped>
.brand-container{
  min-width:1000px;
  min-height:700px;
  background-color: #FAFAFA;
  margin-bottom: 20px;
}
.brand-top-wrapper{
  padding: 20px 0 30px;
  display: flex;
  justify-content: center;
}
.brand-top-wrapper h3{
    margin: 0 auto;
    text-align: center;
    font-size: 24px;
    line-height: 36px;
    color: #333;
    font-weight: normal;
    display: flex;
    align-items: center;
}
.brand-top-wrapper h3  i{
    display: inline-block;
    width: 80px;
    height: 1px;
    background: #666;
    float: left;
    margin: 0px 10px 0;
    line-height: 33px;
}
  .brd-tips{
    width: 710px;
    text-align: center;
    color: rgb(51, 51, 51);
    margin: 0px auto;
    font: 14px / 26px 微软雅黑;
  }
  .brand-tabs{
    height: 59px;
    width: 620px;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: space-around;
  }
  .brand-tab-item{
    display: block;
    float: left;
    width: 84px;
    color: rgb(51, 51, 51);
    text-align: center;
    margin-right: 50px;
    position: relative;
    font: 22px / 56px 微软雅黑;
    cursor: pointer;
  }
  .select{
    color: #E00B0B;
    border-bottom: 5px #e00b0b solid;
  }
  .brand-content-list{
    min-height: 500px;
    width: calc(100% - 20px);
    padding: 10px 10px 0 10px;
  }
.brand-content-list ul{
  padding-bottom: 20px;
}
.brand-item{
  width: 100%;
  margin-top: 10px;
  height: 170px;
  overflow: hidden;
  border-radius: 10px;
  background-color: #FFF;
}
.brand-ranks{
  float: left;
  padding-top: 56px;
  width: 46px;
  height: 160px;
  margin-left: 20px;
}
.brand-ranks p{
    font: 30px/36px "微软雅黑";
    color: #f9a411;
    font-weight: 600;
    text-align: center;
}
.brand-ranks span{
    display: block;
    height: 20px;
    font: 14px/20px "微软雅黑";
    color: #999;
    font-weight: 600;
    text-align: center;
}
  .brand-item-intro{
    /*float: left;*/
    margin-top: 10px;
  }
.brand-item-intro .intro-image-container{
    width: 954px;
    margin-bottom: 0;
    padding-right: 0;
    height: 160px;
}
  .intro-image{
    display: block;
    width: 212px;
    height: 130px;
    float: left;
    border: 1px solid #eee;
    margin-right: 20px;
    margin-left: 20px;
    margin-top: 10px;
  }
.intro-image img {
    width: 210px;
    height: 128px;
  }
  .intro-item-intro{
    width: 480px;
    float: left;
  }
  .intro-item-top{
    height: 30px;
    margin-top: 5px;
  }
  .intro-item-tit{
    float: left;
    height: 30px;
  }
.intro-item-tit a{
    display: block;
    font: 20px/30px "微软雅黑";
    color: #333;
    font-weight: 600;
    float: left;
  }
.intro-item-tit i{
    display: block;
    width: 30px;
    height: 16px;
    float: left;
    margin: 7px 0 0 5px;
    background: url(./image/bg.png) -606px -186px;
  }
  .company-name{
    font: 14px/22px "微软雅黑";
    color: #999;
    margin: 5px 0;
    text-align: left;
  }
  .company-intro{
    width: 403px;
    font: 14px/22px "微软雅黑";
    color: #666;
    margin-top: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .outlets-lists{
    margin-top: 5px;
    height: 36px;
  }
  .outlets-items{
    height: 36px;
    float: left;
    margin-right: 20px;
  }
  .outlets-items i{
    display: block;
    float: left;
    width: 19px;
    height: 18px;
    background: url(image/jingdong.png) no-repeat;
    margin: 9px 10px 0 0;
  }
  .outlets-items:nth-child(2) i{
    background: url(image/tiannao.png) no-repeat;
  }
  .outlets-items p{
      font: 16px/36px "微软雅黑";
      color: #666;
      float: left;
  }
  .outlets-items p a{
      color: #666;
  }
  .watp{
    float: right;
  }
  .watp p{
      font: 14px/36px "微软雅黑";
      color: #a1a1a1;
  }
  .watp p span{
      color: #e00b0b;
      font-size: 20px;
      text-align: right;
  }
  .watp a{
      display: block;
      width: 130px;
      height: 46px;
      text-align: center;
      border-radius: 28px;
      font: 18px/46px "微软雅黑";
      float: right;
      margin-top: 30px;
      color: #fff;
      background: #E00B0B;
  }
  .brand-topic:before{
    content: "";
    display: block;
    width: 100%;
    height: 20px;
    background-color: #FFF;
  }
  .brand-topic{
    display: block;
    width: 100%;
    height: 170px;
    background-image: url(./image/brand_ranking_ad.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    box-sizing: border-box;
    background-color: #FFF;
  }
  .remember-tips{
    width: 100%;
    height: 60px;
    color: rgb(51, 51, 51);
    text-align: center;
    margin-top: 10px;
    font: 14px / 60px 微软雅黑;
    background: rgb(255, 255, 255);
  }
  .remember-tips a{
    color: #E00B0B;
  }
  .brand-recommend{
    padding: 20px 0 30px;
    display: flex;
    justify-content: center;
  }
  .brand-recommend h3{
    margin: 0 auto;
    text-align: center;
    font-size: 24px;
    line-height: 36px;
    color: #333;
    font-weight: normal;
    display: flex;
  }
  .brand-recommend h3 i{
      display: inline-block;
      width: 80px;
      height: 1px;
      background: #666;
      float: left;
      margin: 28px 10px 0;
      line-height: 33px;
  }
  .brand-recommend h3 p{
      color: rgb(51, 51, 51);
      float: left;
      text-align: center;
      font: 24px / 55px 微软雅黑;
  }
  .gouqi-recommend-list{
    width: 100%;
    height: 226px;
    padding: 15px 0 10px 20px;
    background: #fff;
  }

  .rec-item{
    width: 220px;
    height: 100%;
    margin-right: 15px;
    margin-bottom: 15px;
    float: left;
  }
  .rec-item a{
      display: block;
      width: 220px;
      height: 135px;
      margin-bottom: 12px;
  }
  .rec-item a img{
     width: 220px;
     height: 135px;
  }
  .rec-item .brand-name{
    display: block;
    width: 180px;
    height: 30px;
    color: rgb(51, 51, 51);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0px auto;
    font: 14px / 30px 微软雅黑;
    overflow: hidden;
  }
  .look-more{
    display: block;
    width: 110px;
    height: 34px;
    border: 1px solid #ddd;
    margin: 0 auto;
  }
  .look-more i{
    display: block;
    width: 18px;
    height: 18px;
    float: left;
    background: url(./image/bg.png) -267px -98px no-repeat;
    margin: 7px 8px 0 23px;
  }
.look-more p{
    color: rgb(102, 102, 102);
    font: 16px / 32px 微软雅黑;
  }
</style>
